<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="提现记录" />
        <view
            class="wrap-order-status flex"
            :style="'top:' + navigationHeight + 'px;'"
        >
            <block v-for="(item, index) in tab_list" :key="index">
                <view
                    class="status-item flex align-center just-center"
                    @click="onTab(index)"
                >
                    <view :class="{ active: item.status == status }">
                        {{ item.title }}
                    </view>
                </view>
            </block>
        </view>
        <view class="list">
            <view class="item card" v-for="(item, index) in list" :key="index">
                <view class="box flex align-center just-between">
                    <view class="left flex column">
                        <view class="title">
                            <text class="text fb-32">
                                {{ item.status_text }}
                            </text>
                            <text class="price f-24">
                                账户余额：{{ item.account_price }}
                            </text>
                        </view>
                        <view class="sub f-24">
                            <text class="text">
                                申请金额:￥{{ item.money }}
                            </text>
                            <text class="premium">
                                手续费：
                                <text class="premiumPrice">{{
                                    item.service_charge
                                }}</text>
                            </text>
                        </view>
                    </view>
                    <view class="right flex column">
                        <text
                            class="price f-36"
                            :class="item.status != 2 ? 'success' : 'fail'"
                        >
                            {{ item.money }}
                        </text>
                        <text class="time f-24">{{ item.createtime }}</text>
                    </view>
                </view>
                <view class="why f-24" v-if="item.why">
                    驳回原因：{{ item.why }}
                </view>
            </view>
            <uEmpty v-if="list.length === 0" />
        </view>
    </div>
</template>
<script>
import { withdrawList } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            navigationHeight: this.$navigationHeight,
            tab_list: [
                {
                    title: "服务收入提现记录",
                    status: 0,
                },
                {
                    title: "车费提现记录",
                    status: 1,
                },
            ],

            status: 0,
            list: [],

            page: 1,
            total: 0,
        };
    },

    // 下拉刷新
    onPullDownRefresh() {
        this.page = 1;
        this.list = [];
        this.getList();
    },

    // 加载更多
    onReachBottom() {
        if (this.list.length < this.total) {
            this.page++;
            this.getList();
        }
    },

    onLoad(options) {
        this.status = options.type;
        this.getList();
    },

    mounted() {},

    methods: {
        onTab(index) {
            this.status = index;
            this.page = 1;
            this.list = [];
            this.getList();
        },
        // 获取列表
        getList() {
            withdrawList({
                type: this.status + 1,
                page: this.page,
            })
                .then((res) => {
                    this.list.push(...res.data.data);
                    this.total = res.data.total;
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.list {
    padding: 20rpx;
    box-sizing: border-box;
    .item {
        .left {
            .title {
                .price {
                    margin-left: 20rpx;
                    color: #999;
                }
            }
            .sub {
                margin-top: 14rpx;
                .text {
                    margin-right: 20rpx;
                }
                .text,
                .premium {
                    color: #999;
                }
            }
        }
        .right {
            text-align: right;
            .price {
                color: #f87918;
                font-weight: bold;
            }
            .time {
                margin-top: 14rpx;
                color: #999;
            }
        }
        .why {
            color: #ff0000;
            margin-top: 18rpx;
        }
    }
}
.card {
    width: 100%;
    background: white;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
}
.wrap-order-status {
    position: sticky;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100rpx;
    background: white;
    z-index: 10;
    flex-wrap: wrap;

    .status-item {
        flex: 1;
        height: 100rpx;
        overflow: hidden;

        > view {
            display: inline-block;
            height: 100rpx !important;
            line-height: 100rpx;
            box-sizing: border-box;
            border-bottom: 6rpx solid white;
        }

        .active {
            border-color: $theme-color;
        }
    }
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
.success::before {
    content: "-";
    margin-right: 4rpx;
}
.fail::before {
    content: "+";
    margin-right: 4rpx;
}
.premiumPrice::before {
    content: "¥";
    margin-right: 4rpx;
}
</style>